<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet/less" href="/src/css/xiaotao-ui.less">
    <link rel="stylesheet" href="/src/css/menu.css">
    <link rel="stylesheet" href="/src/css/base.css">
    <script src="/src/js/ajax.js"></script>
    <script src="/src/js/base.js"></script>
    <script src="/src/dep/js/vue.js"></script>
    <script src="/src/js/xiaotao-ui.js"></script>
    <script src="/src/dep/js/less.min.js"></script>
    <title>咸鱼云管理员 - 总览</title>
    <style>
        body,html,#app{
            background: none;
            margin: 0;
            padding: 0;
        }
        #app{
            width: 98vw;
            display: flex;
            align-items: stretch;
            flex-wrap: wrap;
        }
        .net-panel{
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }
    </style>
</head>
<body>
    <div id="app">
        <xt-card title="运行统计">
            <xt-card title="审核" style="width: 98%;">
                <table>
                    <tr>
                        <td>已通过：</td><td>{{stat.pass}}</td>
                        <td>已拒绝：</td><td>{{stat.refuse}}</td>
                        <td>待审核</td><td>{{stat.wait}}</td>
                    </tr>
                    <tr>
                        <td>通过率：</td><td>{{(stat.pass/(stat.total-stat.wait)*100).toFixed(2)}}%</td>
                    </tr>
                    <tr>
                        <td>总计贡献文件数：</td><td>{{stat.total}}</td>
                    </tr>
                </table>
                <xt-prog class="xt-slide-in" :total="stat.total" :data="stat.info"></xt-prog>
            </xt-card>
            <xt-card title="系统状态" style="width: 98%;">
                <p>索引更新：{{formatDate(new Date(info.resource_info.last_update_cache*1000))}}</p>
                <p>索引状态：{{info.resource_info.cache_stat == 'making' ? '构建进行中...' : info.resource_info.cache_stat}}</p>
                <p>文件总大小：{{getSizeString(info.resource_info.total_file_size)}}</p>
                <p>文件数：{{info.resource_info.file_count}} 目录数：{{info.resource_info.dir_count}}</p>
            </xt-card>
        </xt-card>
        <xt-card title="CPU信息">
            <table>
                <tr><td>系统运行时长：</td><td>{{info.run_time | secToDate}}</td></tr>
                <tr><td>CPU名称</td><td>{{info.cpu_info.name}}</td></tr>
                <tr><td>CPU物理核心数</td><td>{{info.cpu_info.core_count}}</td></tr>
                <tr><td>CPU逻辑核心数</td><td>{{info.cpu_info.thread_count}}</td></tr>
                <tr v-for="(item,id) in info.cpu_info.frequency" :key="id">
                    <td>CPU#{{id}} 频率</td>
                    <td>{{parseInt(item)}}   MHz</td>
                </tr>
            </table>
        </xt-card>
        <xt-card title="内存信息">
            <xt-card title="主存" style="width: 98%;">
                <table>
                    <tr><td>总量</td><td>{{getSizeString(info.memory_info.total)}}</td></tr>
                    <tr><td>使用中</td><td>{{getSizeString(info.memory_info.used)}}</td></tr>
                    <tr><td>缓冲与缓存</td><td>{{getSizeString(info.memory_info.buff_cache)}}</td></tr>
                    <tr><td>共享</td><td>{{getSizeString(info.memory_info.shared)}}</td></tr>
                    <tr><td>空闲</td><td>{{getSizeString(info.memory_info.free)}}</td></tr>
                    <tr><td>可用</td><td>{{getSizeString(info.memory_info.available)}}</td></tr>
                </table>
                <xt-prog :total="info.memory_info.total" :data="memory_info" ></xt-prog>
            </xt-card>
            <xt-card title="swap" style="width: 98%;">
                <p>用量：{{getSizeString(info.swap_info.used)}} / {{getSizeString(info.swap_info.total)}}</p>
                <xt-prog :color="XTColor['danger']" :total="info.swap_info.total" :value="info.swap_info.used"></xt-prog>
            </xt-card>
        </xt-card>
        <xt-card :title="'磁盘' + disk.device" v-for="(disk,d_key) in info.disk_info" :key="d_key">
            <xt-card :title="'分区' + partition.partition + ' 挂载：' + partition.mount"
                    v-for="(partition,p_key) in disk.partitions"
                    :key="p_key"
                    type="warning"
                    style="width: 100%;margin: 10px 0;">
                    <p>已用：{{getSizeString(partition.used)}}</p>
                    <p>总量：{{getSizeString(partition.total)}}</p>
                <xt-prog class="xt-slide-in"
                        :total="partition.total"
                        :title="getSizeString(partition.used)"
                        :value="partition.used">
                </xt-prog>
            </xt-card>
        </xt-card>
        <xt-card title="网络监控" style="width: 98%">
            <div class="net-panel">
                <xt-card :title="'接口：' + index" v-for="(net,index) in info.net_info">
                    <div>
                        <span>实时下载：{{getSizeString(net.recv_speed)}}/s</span>
                        <span>下载总量：{{getSizeString(net.recv_total)}}</span>
                    </div>
                    <div>
                        <span>实时上传：{{getSizeString(net.send_speed)}}/s</span>
                        <span>上传总量：{{getSizeString(net.send_total)}}</span>
                    </div>
                    <span style="color: rgb(100,100,100);font-size: 12px;">注：实时网速检测取样时间为200ms，流量通过过少时会显示0Byte/s</span>
                </xt-card>
            </div>
        </xt-card>
    </div>
    <script>
        aoej.load()
        var finish = false
        var app;
        function main(e){
            aoej.finish()
            finish = true
            if(e.data.status != 1){
                return
            }
            if(app == undefined){
                app = new Vue({
                    el:"#app",
                    data:{
                        info:e.data.data,
                        memory_info:[],
                        stat:{}
                    },created(){
                        this.memory_info = [
                            { value:this.info.memory_info.used, title:"使用中", color:XTColor.warning},
                            { value:this.info.memory_info.buff_cache, title:"缓冲与缓存", color:XTColor.success}
                        ]
                        $ajax('post',"/api/admin/Contribute/getStat",null,(e)=>{
                            this.stat = e.data.data
                            this.stat.info = [
                                { value:this.stat.pass, title:"已通过：" + this.stat.pass, color:XTColor.success },
                                { value:this.stat.refuse, title:"已拒绝" + this.stat.refuse, color:XTColor.danger}
                            ]
                        })
                    },filters: {
                        secToDate: function(value) {
                            var d = Math.floor(value / 86400);
                            var h = Math.floor((value / 3600)%24)
                            var m = Math.floor((value / 60) % 60)
                            var s = Math.floor(value % 60)
                            return d + '天' + h + '时' + m + '分' + s + '秒'
                        }
                    },
                })
            }else{
                app.info = e.data.data
                app.memory_info = [
                            { value:app.info.memory_info.used, title:"使用中", color:XTColor.warning},
                            { value:app.info.memory_info.buff_cache, title:"缓冲与缓存", color:XTColor.success}
                        ]
            }
        }
        function loadData(){
            finish = false
            $ajax('post','/api/admin/System/getSystemInfo',null,main)
        }
        loadData()
        setInterval(()=>{
            if(finish){
                loadData()
            }
        },2000)
    </script>
</body>
</html>
